{extend name="common/form" /}

{block name="body_bottom"}
<table class="layui-table" lay-skin="line">
    <colgroup>
        <col width="70">
        <col >
        <col width="200">
        <col width="100">
    </colgroup>
    <thead>
        <tr>
            <td colspan="4">最近20条聊天记录</td>
        </tr>
    </thead>
    <tbody>
    {volist name="data_list" id="vo"}
    <tr>
        <td>
            {if condition="!empty($vo.headimgurl)"}
            <img src="{$vo.headimgurl}" alt="{$vo.headimgurl}" style="width: 60px;">
            {/if}
        </td>
        <td>
            <p>{$vo.nickname}</p>
            <p class="msg-type">
                {switch name="vo.type"}
                {case value="text"}
                {$vo.content.Content}
                {/case}
                {case value="image"}
                <a href="javascript:;"
                   class="js-view"
                   data-mediaid="{$vo.content.MediaId}"
                   data-type="{$vo.type}"
                   data-id="{$vo.id}"
                ><i class="fa fa-picture-o"></i></a>
                {/case}
                {case value="video"}
                <a href="javascript:;"
                   class="js-view"
                   data-mediaid="{$vo.content.MediaId}"
                   data-type="{$vo.type}"
                   data-id="{$vo.id}"
                ><i class="fa fa-file-movie-o"></i></a>
                {/case}
                {case value="voice"}
                <a href="javascript:;"
                   class="js-view"
                   data-mediaid="{$vo.content.MediaId}"
                   data-type="{$vo.type}"
                   data-id="{$vo.id}"
                ><i class="fa fa-file-audio-o"></i></a>
                {/case}
                {/switch}
            </p>
        </td>
        <td>{:ky_publish_time($vo['create_time'])}&nbsp;&nbsp;{:date("H:i", $vo['create_time'])}</td>
        <td>{if condition="$vo.status=='1'"}<span style="color: #FF5722">已回复</span>{/if}</td>
    </tr>
    {/volist}
    </tbody>
</table>
<script>
    $(function () {
        layui.use(['layer'], function () {
            $('.js-view').on('click', function () {
                let loading_index = layer.load(1)
                    ,type = $(this).data('type');
                $.post("{:url('getTempMediaUrlPost')}", {
                    media_id: $(this).data('mediaid'),
                    id: $(this).data('id'),
                }, function (res) {
                    layer.close(loading_index);
                    if(res.code === 1){
                        let content = '';
                        switch (type) {
                            case 'image':
                                content = '<img src="url" style="width: 400px;" alt="url">';
                                break;
                            case 'video':
                                content = '<video controls style="width: 360px;height: 200px;"><source src="url"  type="video/mp4">\
                                        您的浏览器不支持 HTML5 video 标签。\
                                        </video>';
                                break;
                            case 'voice':
                                content = '<audio controls><source src="url" type="audio/mpeg">\
                                        您的浏览器不支持 HTML5 audio 标签。\
                                        </audio>';
                                break;
                        }
                        layer.open({
                            type: 1,
                            area: ['450px', 'auto'],
                            content: '<div class="media-view">'+content.replace('url', res.data.url)+'</div>'
                        });
                    }else{
                        layer.alert(res.msg);
                    }
                });
            });
        });
    });
</script>

<style>
    .media-view{padding: 10px;text-align: center;min-height: 300px;}
    .msg-type{color: #9a9a9a;margin-top: 10px;}
    .msg-type .fa{font-size: 24px;color: #9a9a9a;}
</style>
{/block}


